<template>
  <div 
    class="message-item p-4 border-b border-gray-700 hover:bg-background-800 transition-colors duration-normal cursor-pointer"
    :class="{ 'bg-background-800': !message.is_read }"
    @click="handleClick"
  >
    <div class="flex items-start gap-3">
      <!-- 发送者头像 -->
      <div class="flex-shrink-0">
        <div 
          v-if="message.sender_avatar"
          class="w-10 h-10 rounded-full overflow-hidden"
        >
          <img 
            :src="message.sender_avatar" 
            :alt="message.sender_name || '用户'"
            class="w-full h-full object-cover"
          />
        </div>
        <div 
          v-else
          class="w-10 h-10 rounded-full bg-gradient-ai flex items-center justify-center"
        >
          <span class="text-white font-bold text-sm">
            {{ (message.sender_name || '系统')?.[0] || 'S' }}
          </span>
        </div>
      </div>

      <!-- 消息内容 -->
      <div class="flex-1 min-w-0">
        <div class="flex items-center justify-between mb-1">
          <div class="flex items-center gap-2">
            <span class="font-medium text-text-primary">
              {{ message.sender_name || '系统' }}
            </span>
            <span 
              v-if="message.sender_is_ai && showAiLabel"
              class="px-2 py-0.5 text-xs bg-gradient-ai text-white rounded-full"
            >
              AI
            </span>
            <span class="text-xs text-text-muted">
              {{ formatTime(message.created_at) }}
            </span>
          </div>
          
          <!-- 未读标记 -->
          <div 
            v-if="!message.is_read"
            class="w-2 h-2 bg-primary rounded-full flex-shrink-0"
          ></div>
        </div>

        <h4 class="font-medium text-text-primary mb-1">
          {{ message.title }}
        </h4>
        
        <p class="text-sm text-text-secondary line-clamp-2">
          {{ message.content }}
        </p>

        <!-- 相关电影链接 -->
        <div 
          v-if="message.related_movie_title"
          class="mt-2 text-xs text-primary hover:text-primary/80 transition-colors duration-normal"
          @click.stop="navigateToMovie"
        >
          📽️ {{ message.related_movie_title }}
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity duration-normal">
        <DropdownMenu placement="bottom-end">
          <template #trigger>
            <UiButton
              variant="ghost"
              size="sm"
              shape="circle"
              class="w-8 h-8"
            >
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
              </svg>
            </UiButton>
          </template>

          <DropdownMenuItem @click="markAsRead">
            {{ message.is_read ? '标记为未读' : '标记为已读' }}
          </DropdownMenuItem>
          <DropdownMenuItem @click="deleteMessage" variant="danger">
            删除消息
          </DropdownMenuItem>
        </DropdownMenu>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { formatDistanceToNow } from 'date-fns'
import { zhCN } from 'date-fns/locale'
import type { MessageWithDetails } from '../../types/messages'
import { UiButton, DropdownMenu, DropdownMenuItem } from '../ui'
import { useUiStore } from '../../store/useUiStore'

// Props
interface Props {
  message: MessageWithDetails
}

const props = defineProps<Props>()
const uiStore = useUiStore()
const showAiLabel = computed(() => uiStore.showAiLabel)

// Emits
const emit = defineEmits<{
  markAsRead: [messageId: number]
  delete: [messageId: number]
  click: [message: MessageWithDetails]
}>()

// Router
const router = useRouter()

// 格式化时间
const formatTime = (dateString: string) => {
  try {
    const date = new Date(dateString)
    return formatDistanceToNow(date, { 
      addSuffix: true, 
      locale: zhCN 
    })
  } catch {
    return '未知时间'
  }
}

// 处理点击
const handleClick = () => {
  emit('click', props.message)
  
  // 如果消息未读，自动标记为已读
  if (!props.message.is_read) {
    emit('markAsRead', props.message.id)
  }
}

// 标记为已读/未读
const markAsRead = () => {
  emit('markAsRead', props.message.id)
}

// 删除消息
const deleteMessage = () => {
  emit('delete', props.message.id)
}

// 导航到相关电影
const navigateToMovie = () => {
  if (props.message.related_movie_id) {
    router.push(`/movie/${props.message.related_movie_id}`)
  }
}
</script>

<style scoped>
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
